<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>账户绑定</title>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <style>
        html{
            background-color: #eeeeee;
        }
        .account_layer{
            width: 100%;
            height: 100%;
        }
        .seting{
            height: 1.3rem;
            padding-top: 0.5rem;
            width: 100%;
            background-color: #fff;
            position: relative;
            margin-bottom: 0.2rem;
        }
        .seting em{
            position: absolute;
            width: 0.64rem;
            height: 0.88rem;
            background: url("../img/b_left_03.png") no-repeat center;
            left: 2%;
            -webkit-background-size: 80%;
            background-size: 80%;
        }
        .seting h3{
            text-align: center;
            line-height: 0.88rem;
            font-size: 0.32rem;
            color: #5a5a5a;
            padding: 0;
            margin: 0;
        }
        .account_content{
            width: 100%;
        }
        .account_content li{
            font-size: 0.3rem;
            height: 1.1rem;
            line-height: 1.1rem;
            background-color: #fff;
            padding-left: 0.3rem;
        }
        .account_content li a{
            color: #5a5a5a;
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }
        .account_link li a .left{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .account_link li a .left span{
            top:-15%;
            height: 0.6rem;
            position: absolute;
            left: 0;
            font-size: 0.34rem;color:#333;
        }
        .account_link li a .left em{
            bottom: 40%;
            position: absolute;
            left: 0;
            height: 0.45rem;
            font-size: 0.16rem;
        }
        .account_link li a .left em i{
            font-size: 0.16rem;
            display: inline-block;
        }
    .mui-switch{
        position: absolute;
        right: 2%;
        top: 20%;
    }
        .mui-switch .mui-active{
            background-color: #f093a1;
        }
        .account_layer h4{
            font-size:0.24rem;
            color:#737373;
            padding-left: 0.3rem;
        }
    </style>
</head>
<body>
<div class="account_layer account_save_layer"  style="overflow-x: hidden">
    <header class="seting">
        <em onclick="back()"></em>
        <h3>账户绑定</h3>
    </header>
    <ul class="account_content account_link">
        <li>
            <a href="javascript:;">
               <p class="left clearfix ">
                   <span>微信</span>
                   <em>已绑好</em>
               </p>

                <div class="mui-switch mui-switch-mini mui_close"id="mySwitch1">
                    <div class="mui-switch-handle" ></div>
                </div>
            </a>
        </li>
        <li>
            <a href="javascript:;">
               <p class="left clearfix ">
                   <span>微博</span>
                   <em>未绑定<i></i></em>
               </p>

                <div class="mui-switch mui-switch-mini mui_close" id="mySwitch2">
                    <div class="mui-switch-handle" ></div>
                </div>
            </a>
        </li>
        <li>
            <a href="javascript:;">
               <p class="left clearfix ">
                   <span>QQ</span>
                   <em>未绑定<i></i></em>
               </p>

                <div class="mui-switch mui-switch-mini mui_close" id="mySwitch">
                    <div class="mui-switch-handle" ></div>
                </div>
            </a>
        </li>
        <li>
            <a href="javascript:;">
               <p class="left clearfix ">
                   <span>支付宝</span>
                   <em>未绑定<i></i></em>
               </p>

                <div class="mui-switch mui-switch-mini mui_close" id="mySwitch3">
                    <div class="mui-switch-handle" ></div>
                </div>
            </a>
        </li>

    </ul>
    <h4>绑定后，即可使用第三方账号意见登录beyond 高考</h4>

</div>
<script src="../js/x_rem.js"></script>
<script src="../js/mui.min.js"></script>
<script>
    function back(){
        history.go(-1);
    }
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    mui('.mui-switch').each(function() { //循环所有toggle
       //判断状态
        this.addEventListener('toggle',function(event){
            if(this.classList.contains("mui-active")){
                this.style.backgroundColor="#fa93a1";
                this.style.border="1px solid #fa93a1";
                console.log(this.previousSibling.previousSibling.children[0].innerText);
            }
        })


    });

</script>
</body>
</html>